<template>
  <div>
    <h1>新闻列表</h1>
    <p><input type="text" v-model="title"></p>
    <p><input type="text" v-model="content"></p>
    <p><input type="file" id="pic" ></p>
    <button @click="add">添加</button>

    <table border="1px">
      <tr>
        <td>标题</td>
        <td>内容</td>
        <td>图片</td>
      </tr>
      <tr v-for="i in newlist">
        <td>{{i.title}}</td>
        <td>{{i.context}}</td>
        <td>
          <img :src="'http://localhost:8000'+i.pic" alt="" width="300px" height="200px">
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <div v-for="i in tpage" style="float: left">
            <button @click="show(i)">
              {{i}}
            </button>
          </div>
        </td>
      </tr>
    </table>

  </div>
</template>

<script>
export default {
  name: "news",
  data() {
    return {
      title:'',
      content:'',
      newlist:[],
      tpage:''
    }
  },
  methods: {
    add(){
      let formDate = new FormData()
      formDate.append('title',this.title)
      formDate.append('context',this.content)
      var pic = document.getElementById('pic').files[0]
      formDate.append('pic',pic)
      this.axios.post('news/',formDate)
        .then(res=>{
          if (res.data.code==200){
            alert('添加成功')
          }
          console.log(res)
        })
    },
    //  展示
    show(p){
      this.axios.get('news/?page='+p)
        .then(res=>{
          this.newlist = res.data.list
          this.tpage = res.data.tpage
        })
    }
  },
  mounted() {
    this.show(1)
  }
}
</script>

<style scoped>

</style>
